<template>
  <div class="order-list-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>订单信息列表</h2>
      <div class="action-buttons">
        <el-button @click="goBack" type="primary">返回</el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <el-table
      :data="orders"
      border
      stripe
      size="small"
      style="width: 100%; margin-top: 20px"
      @sort-change="handleSortChange"
    >
      <el-table-column prop="id" label="订单ID" width="80" />
      <el-table-column prop="custmerId" label="客户ID" width="100" />
      <el-table-column prop="createTime" label="创建时间" width="180" sortable>
        <template #default="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="targetAddr" label="收货地址" min-width="180" />
      <el-table-column prop="totalCount" label="订单总额" width="120">
        <template #default="scope">
          ￥{{ scope.row.totalCount.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="订单状态" width="100">
        <template #default="scope">
          {{ getOrderStatusText(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column prop="payTime" label="支付时间" width="180">
        <template #default="scope">
          {{ scope.row.payTime ? formatDate(scope.row.payTime) : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="refundTime" label="退款时间" width="180">
        <template #default="scope">
          {{ scope.row.refundTime ? formatDate(scope.row.refundTime) : '-' }}
        </template>
      </el-table-column>
    </el-table>

    <!-- 空状态 -->
    <el-empty v-if="!loading && orders.length === 0" description="暂无订单数据" />

    <!-- 加载状态 -->
    <el-loading v-if="loading" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { useRouter } from 'vue-router';

// 响应式数据
const orders = ref([]);
const loading = ref(false);
const sortField = ref('');
const sortOrder = ref('');
const router = useRouter();

// 生命周期钩子：组件挂载后加载订单数据
onMounted(() => {
  fetchOrderList();
});

// 获取订单列表
const fetchOrderList = async () => {
  loading.value = true;
  
  try {
    const res = await axios.get('/orderapi/orders');
    const apiData = res.data;
    
    if (apiData.code === 200) {
      orders.value = apiData.data || [];
    } else {
      ElMessage.error(apiData.message || '获取订单列表失败');
    }
  } catch (err) {
    console.error('请求异常:', err);
    ElMessage.error('网络请求失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};

// 排序处理
const handleSortChange = ({ prop, order }) => {
  sortField.value = prop;
  sortOrder.value = order === 'ascending' ? 'asc' : 'desc';
  fetchOrderList();
};

// 日期格式化
const formatDate = (dateString) => {
  if (!dateString) return '-';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
};

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const statusMap = {
    1: '待支付',
    2: '已支付',
    3: '已发货',
    4: '已完成',
    5: '已取消'
  };
  return statusMap[status] || `未知状态(${status})`;
};

// 返回上一页
const goBack = () => {
  router.back();
};
</script>

<style scoped>
.order-list-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}
</style>